<template>
  <div>   
    <!-- 角色列表 -->
    <el-card>     
      <div>角色列表</div>
      <el-divider></el-divider>
          <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"  :data="subroles"  stripe style="width: 100%">
          <el-table-column prop="id" label="角色ID" width="220"></el-table-column>
	  <el-table-column prop="name" label="角色名" width="220"></el-table-column>
          <!-- <el-table-column label="操作" >
    	<template slot-scope="scope">
    	  <el-button @click="removeRole(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
    	</template>
          </el-table-column> -->
        </el-table>           
    </el-card>
    <!-- 账号列表 -->
    <el-card>     
      <div>账号列表</div>
      <el-divider></el-divider>
          <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"  :data="substaffs"  stripe style="width: 100%">
          <el-table-column prop="account" label="账号名" width="220"></el-table-column>
          <el-table-column prop="name" label="备注" width="220"></el-table-column>
          <el-table-column prop="role.name" label="所属角色" width="220"></el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button @click="removeShop(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>           
    </el-card>
  </div>
</template>

<script>
import {getStaffByStaffId,deleteStaff,getRoleByStaffId,deleteRole} from "../api/index"

export default {
  components:{
    
  },
  data() {
    return {
      roleid:1,
      pages:{
        page:1,
        count:7,
      },      
      substaffs: [],
      subroles:[]      
    };
  },
  created() {
     this.getGoods()
     this.getRole()
  },
  methods:{
    // 添加权限
    /* edtior(id) {
      this.$router.push({path:"/addAuthourity",query:{id}})
    }, */
    // 获取列表
    async getGoods() {	    
      const res = await getStaffByStaffId();
      if(res.code !==200)return this.$message.error("获取账号列表失败")
      //this.$message.success("获取账号列表成功")
      this.substaffs = res.data.staff.substaffs;      
    },
    // 获取列表
    async getRole() {	    
      const res = await getRoleByStaffId();
      if(res.code !==200)return this.$message.error("获取角色列表失败")
      //this.$message.success("获取角色列表成功")
      this.subroles = res.data.role.subroles;    
    },
    // 账号删除
    async removeShop(id){
      const del=await this.$confirm("确定删除该账号吗？","删除").catch(err=>err)
      if(del !== "confirm")return this.$message.info("取消删除")
      console.log(id)
      const res=await deleteStaff({id})
      console.log(res.code)
      if(res.code !== 200)return this.$message.error("删除失败")
      this.$message.success("删除成功")
      this.getGoods()
    },
    // 角色删除
    async removeRole(id){
      const del=await this.$confirm("确定删除该角色吗？","删除").catch(err=>err)
      if(del !== "confirm")return this.$message.info("取消删除")
      console.log(id)
      const res=await deleteRole({id})
      console.log(res.code)
      if(res.code !== 200)return this.$message.error("删除失败")
      this.$message.success("删除成功")
      this.getRole()
    }
  }
};
</script>

<style lang="less" scoped>
.el-col{
  padding-bottom: 20px;
}
.el-card {
  margin-bottom: 20px;
}
.shop_list {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #eee;
}
img{
  width: 50px;
  height: 50px;
}
</style>